import React from 'react';
import {connect} from 'react-redux';
import Spinner from '../Spinner/index';
import styles from './Header.css';
import FlatButton from 'material-ui/FlatButton';

//引入登录页面
import WechatLogin from '../WechatLogin/index';
import {getcookie,setcookie} from '../../../utils/cookies';
class Header extends React.Component {
  constructor(props) {
    super(props)
    this.handleOpen = this.handleOpen.bind(this)
    this.handleClose = this.handleClose.bind(this)

    this.state = {
      open: false,
    };
  }

  handleOpen() {
    this.setState({open: true});
  }

  handleClose() {
    console.log(11111111)
    this.setState({open: false});
  }

  componentWillMount(){
    let cookieToken = getcookie('cookieToken') ? getcookie('cookieToken') : null;
    let headImgUrl = getcookie('headImgUrl') ? getcookie('headImgUrl') : null;
    let status = getcookie('status') ? getcookie('status') : null;
    let nickname = getcookie('nickname') ? getcookie('nickname') : null;

    this.setState({
      cookieToken,
      headImgUrl,
      status,
      nickname,
    })
  }

  render() {
    //是否弹出登录框
    console.log(this.props);
    const WechatLoginDialogStatus = this.state.open;
    const {loading } = this.props;
    // const loading  = true;

    const isLogin = this.state.cookieToken != null;
    //登录之后在登录按钮出展示登录状态，观看直播的时候

    const afterLoginProfile = isLogin ?
      <div  className={styles.profileProfile}>
        <img src={this.state.headImgUrl} />
        <div className={styles.text}>
          <h5>{this.state.nickname}</h5>
          <span> 一个爱学习的同学 </span>
        </div>
        <div className={styles.quit} onClick={()=>{
        //将cookie删除
          setcookie("headImgUrl",null,0);
          setcookie("nickname",null,0);
          setcookie("status",null,0);
          setcookie("cookieToken",null,0);
          this.setState({
            cookieToken: null,
            headImgUrl: null,
            status:null,
            nickName: null
          })
        }}>
            退出
        </div>
      </div>
      : <div className={styles.profileLogin}>
        <FlatButton
          onClick={this.handleOpen}
          className={styles.btn}
        >
          登录
        </FlatButton>
      </div>;
    const afterLoginProfileDialog = WechatLoginDialogStatus ? <WechatLogin open={WechatLoginDialogStatus} handleClose={this.handleClose}/> : '';

    return (
      <section className={styles.header}>
        { loading ? <Spinner color="#fff" size={22}/> : afterLoginProfile }
        { afterLoginProfileDialog }
      </section>
    )
  }
}


export default connect()(Header)
